Kimba Design Kimba

From Code to Carbon Footprint: A Guide to Building Sustainable Websites

Paul Littlewood

Paul Littlewood

  • ecology
  • technology
  • design

Why is Sustainable Design Important?

The move to an online world has been assumed to be greener, but its environmental impacts are being overlooked. Vast amounts of data is being stored and transmitted indiscriminately, and the data centres responsible require immense amounts of energy.

If the internet was a country, it would be the 7th largest polluter. nature.com

The issue is becoming more pronounced as network technology continues to advance. With each upgrade, we find new ways to utilise the available bandwidth and consume more data. In 2020, the internet’s energy consumption amounted to a staggering 4% of the world’s total, and experts predict that this number could rise to 14% by 2040.

It’s increasingly clear that the internet has a substantial environmental impact, and we must take action to reduce its carbon footprint. Implementing sustainable web design and development practices is crucial to achieving this goal.

Fortunately the benefits of sustainable web design go beyond reducing carbon footprint. Well-designed, efficient websites load quickly, providing a better experience for users and boost a business’s search engine rankings. By embracing sustainable web design and development practices, businesses can not only help protect the environment but also improve their online presence and customer satisfaction.

How to Design Sustainable Websites?

Efficiency is a hallmark of a sustainable website. By establishing a clear understanding of the site’s objectives, we can make informed decisions regarding which features to include and how to implement them. Let’s explore some of the most important elements that should be taken into consideration.

Feature Selection

When designing a website, it’s common to fall into the trap of including too many features, leading to the “kitchen sink” approach, often seen on sites created with template based website building platforms. It’s important to only include features that offer value to the user and are aligned with the overall objectives of the site. Taking a critical approach to feature selection allows for both improved user experience and minimised data use.

Images

Images typically comprise around 50% of a web page’s total size and are a prime target for optimisation. It’s important to use responsive image techniques that deliver appropriately sized images to various devices. Also, newer file types such as WEBP should be used, which can drastically reduce file size. Unfortunately, it’s common to see these modern techniques completely ignored leading to page sizes ballooning to 10MB or more. With proper optimisation, however, these bloated pages could easily be reduced to a fraction of their current size.

Code

Javascript is the next biggest contributor to web page weight after images. It’s important to use Javascript with care and consider if the feature it implements adds value to the site. A common problem is that much of the Javascript loaded by a web page is often never actually used. This can often be attributed to the use of heavy third-party frameworks, libraries, and packages, when similar features could be more efficiently custom-coded with vanilla Javascript. Similarly, with CSS, it’s important to only ship the features that the site is actually using when frameworks are used. Tools like Purge CSS can be useful here, ensuring minimal CSS is shipped.

It’s important to also minify your code and enable compression on your web server to further optimise file delivery.

Hosting

We’ve focused on optimising for data efficiency, but it’s equally important to choose a web hosting service that has minimal impact on the environment. Fortunately, more and more green hosting companies are emerging, offering data centres that run on renewable energy. The Green Web Foundation provides a helpful directory to locate hosting providers that have provided evidence of their green claims.

It is crucial to be discerning when assessing a company’s green claims, particularly when they use terms such as “100% renewable energy” as these claims can be nuanced. Other factors to consider include whether the hosting company owns the renewable energy sources, purchases them, or uses credits for carbon offsetting. It’s also worth exploring the company’s efforts to reduce energy consumption through efficiency measures and investments in renewable energy infrastructure.

Summary

Sustainable web design is increasingly important for reducing the carbon footprint of the internet while also improving the user experience and search engine rankings. With a more conscious approach to design and development these techniques can help reduce the environmental impact of the internet while also benefiting your business.